import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Input, Select } from 'antd';
import HOCSelect from '@/components/AntDesign/Select';
import Area from '../../../components/Area';

const FormItem = Form.Item;
const { Option } = Select;

class BasicForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount = () => {};

  getData = (value, id) => {
    const { form } = this.props;
    if (id) {
      form.setFieldsValue({ [id]: value });
      this.setState({ [id]: value });
    }
  };

  render() {
    const {
      form: { getFieldDecorator },
      bankList,
    } = this.props;
    // 表单布局
    const xl = { span: 8 };
    const lg = { span: 8 };
    const md = { span: 8 };
    const sm = 24;
    const colProps = { xl, lg, md, sm };
    // 下拉选项
    const bankOL =
      bankList.length &&
      bankList.map(options => <Option key={options.itemCode}>{options.itemName}</Option>);
    return (
      <Form layout="vertical">
        <Row gutter={64}>
          <Col {...colProps}>
            <FormItem label="城市">
              {getFieldDecorator('areaId', {
                rules: [{ required: true, message: '请选择' }],
              })(<Area getData={this.getData} />)}
            </FormItem>
          </Col>
          <Col {...colProps}>
            <FormItem label="银行">
              {getFieldDecorator('bankId', {
                rules: [{ required: true, message: '请选择' }],
              })(
                <HOCSelect
                  placeholder="请输入关键字检索"
                  style={{ width: '100%' }}
                  labelInValue
                  showSearch
                  optionFilterProp="children"
                >
                  {bankOL}
                </HOCSelect>
              )}
            </FormItem>
          </Col>
          <Col {...colProps}>
            <FormItem label="开户行">
              {getFieldDecorator('bankOfDepoName', {
                rules: [{ required: true, message: '请输入的内容必须在1-100个字' }],
              })(<Input placeholder="请输入" maxLength={100} />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={64}>
          <Col {...colProps}>
            <FormItem label="银行账号">
              {getFieldDecorator('bankAcco', {
                rules: [
                  { required: true, message: '最大长度不超过25位数字', pattern: /^\d{1,25}$/ },
                ],
              })(<Input placeholder="请输入" maxLength={25} />)}
            </FormItem>
          </Col>
          <Col {...colProps}>
            <FormItem label="开户单位名称">
              {getFieldDecorator('accoHolderName', {
                rules: [{ required: true, message: '请输入的内容必须在1-100个字' }],
              })(<Input placeholder="请输入" maxLength={100} />)}
            </FormItem>
          </Col>
          <Col {...colProps}>
            <FormItem label="备注">
              {getFieldDecorator('remark', {
                rules: [
                  {
                    required: false,
                    message: '请输入的内容必须在1-200个字',
                    pattern: /^[A-Za-z\u4e00-\u9fa5\0-9]{1,200}$/,
                  },
                ],
              })(<Input placeholder="请输入" maxLength={200} />)}
            </FormItem>
          </Col>
        </Row>
      </Form>
    );
  }
}
const BasicFormList = Form.create()(BasicForm);
export default BasicFormList;
